<template>
	<!-- 管理员 -->
	<div id="tops">
		<div class="Box">
			<el-container>
				<el-header class="Header">
					<div class="inpt">
						<el-input placeholder="请输入角色名称" v-model="name" clearable></el-input>
						 <el-button type="primary" @click="list" icon="el-icon-search" style="width: 120px; height: 40px; margin-left: 10px;" v-insert="['admin:admin:list']">查找</el-button>
					</div>
					<el-row>
						<el-button type="primary" @click="amend()" icon="el-icon-edit" style="width: 120px; height: 40px; margin-top: 20px; margin-left: 10px;" v-insert="['admin:admin:create']">添加</el-button>
					</el-row>
				</el-header>
				<!-- 弹框 -->
				<el-dialog :title="title" :visible.sync="butt" :before-close="handleClose" style="margin-top: 150px;">
					<el-form :model="form" :rules="rules" status-icon ref="form">
						<el-form-item label="登录名" :label-width="formLabelWidth" prop="username">
							<el-input v-model="form.username" autocomplete="off" :disabled="title == '创建' ? false : true"></el-input>
						</el-form-item>
						<el-form-item label="密码" :label-width="formLabelWidth" prop="password">
							<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
							<el-input v-model="form.phone" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realname">
							<el-input v-model="form.realname" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="授权角色" :label-width="formLabelWidth" prop="roleIds">
							<el-select v-model="form.roleIds" multiple filterable allow-create default-first-option placeholder="请选择">
								<el-option v-for="item in rid" :key="item.value" :value="item.value" :label="item.label">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button @click="cancel()">取 消</el-button>
						<el-button type="primary" @click="demil(form)">确 定</el-button>
					</div>
				</el-dialog>

				<el-main class="Main">
					<template>
						<el-table :data="tableData" border style="width: 100%" element-loading-text="拼命加载中。。。">
							<el-table-column prop="id" align="center" label="管理员Id" min-width="180" sortable>
								<template slot-scope="scope">
									{{scope.row.id}}
								</template>
							</el-table-column>
							<el-table-column prop="username" align="center" label="管理员名称" min-width="180">
								<template slot-scope="scope">
									{{scope.row.username}}
								</template>
							</el-table-column>
							<el-table-column prop="address" align="center" label="管理员头像" min-width="180">

							</el-table-column>
							<el-table-column align="center" label="管理员角色" min-width="180">
								<template slot-scope="scope">
									<el-tag v-for="item in scope.row.roleIds" :Key="item" style="margin: 0px 5px 5px 0px;">
										<span v-for="oitem in rid" :key="oitem.value" v-if="oitem.value == item">
											{{oitem.label}}
										</span>
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column align="center" label="操作" min-width="180">
								<template slot-scope="scope">
									<el-button type="primary" size="mini" @click="amend(scope.row)" v-insert="['admin:admin:update']">编辑</el-button>
									<el-button type="danger" size="mini" @click="dis(scope.row)" v-insert="['admin:admin:delete']">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</el-main>
				<el-header class="buttom">
					<div class="block">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
						 :page-sizes="[10, 20, 30, 40,50,100]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
						</el-pagination>
					</div>
				</el-header>
			</el-container>
		</div>
	</div>

</template>

<script>
	import {
		managers,
		managerses,
		adminaddate,
		deleted
	} from '../../api/adminlist.js'
	export default {
		data() {
			var validateAge = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('管理员名称不能为空'))
				} else {
					callback()
				}
			}
			var validatePass = (rule, value, callback) => {
				const reg = /^[0-9a-zA-Z$./]{8}/
				if (value === '') {
					callback(new Error('请输入密码'))
				} else if (value < 6 || value > 18 || !reg.test(value)) {
					callback(new Error('密码长度应为6~18位数字和字母'))
				} else {
					callback()
				}
			}
			var validateDesc = (rule, value, callback) => {
				const reg = /^[\u4e00-\u9fa5]+$/
				if (value === '') {
					callback(new Error('真实姓名不能为空'))
				} else if (!reg.test(value)) {
					callback(new Error('姓名必须为中文'))
				} else {
					callback()
				}
			}
			var validatePhone = (rule, value, callback) => {
				const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (value === '') {
					callback(new Error('手机号不能为空'))
				} else if (!reg.test(value)) {
					callback(new Error('手机号格式不正确'))
				} else {
					callback()
				}
			}
			return {
				formLabelWidth: '120px',
				title: '',
				tableData: [],
				rid: [],
				name: '', // 搜索
				page: 1, // 页码
				limit: 20, // 页码长度
				count: null,
				form: {
					username: '',
					realname: '',
					password: '',
					phone: '',
					id: '',
					roleIds: []
				},
				numbut: '', // 识别弹框作用  修改还是新增
				butt: false, // 取消
				rules: {
					username: [{
						required: true,
						validator: validateAge,
						trigger: 'blur'
					}],
					password: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					realname: [{
						required: true,
						validator: validateDesc,
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						validator: validatePhone,
						trigger: 'blur'
					}]
				},
				// radio: "1",
				// value: '', //当前儿子的id
				dialogFormVisible: false,
				Updatedata() {}
			}
		},
		created() {
			this.list()
		},
		methods: {
			list() {
				const zhiw = {
					username: this.name,
					page: this.page,
					limit: this.limit
				}
				managers(zhiw).then((resspose) => {
					console.log(resspose)
					this.tableData = resspose.data.data.items
					this.count = resspose.data.data.total
				})
				managerses().then((resspose) => {
					console.log(resspose, '456')
					this.rid = resspose.data.data
				})
			},
			handleSizeChange(val) {
				this.limit = val
				console.log(this.limit)
				this.list()
			},
			handleCurrentChange(val) { // 页面切换
				const vals = val
				this.page = val
				this.list()
			},
			handleClose(done) { // 弹框插件提示
				this.$confirm('确认关闭?')
					.then(_ => {
						this.list()
						this.butt = false
						this.$refs.form.resetFields()
					})
			},
			handleClose(done) { // 弹框插件提示
				this.$confirm('确认关闭？')
					.then(_ => {
						this.list()
						this.butt = false
						this.$refs.form.resetFields()
					})
			},
			cancel() { // 弹框取消提示
				this.$confirm('是否取消？')
					.then(_ => {
						this.list()
						this.butt = false
						this.$refs.form.resetFields()
					})
			},
			// add(num) {
			// 	this.butt = true
			// 	this.numbut = num
			// },
			amend(row) { // 编辑
				console.log(row, '465')
				this.butt = true
				if (!row) {
					this.Updatedata = {}
					this.title = '创建'
					this.form.username = ''
					this.form.phone = ''
					this.form.password = ''
					this.form.realname = ''
					this.form.roleIds = ''
				} else {
					this.Updatedata = row
					this.title = '修改'
					this.form = row
				}
			},
			demil(name, cent) {
				this.$refs.form.validate((valid) => {
					if (valid) {
						const submit = this.title == '修改' ? 'update' : 'create' // 删除还是编辑
						const data = {
							_mt: submit,
							adminDTO: this.form
						}
						console.log(data)
						adminaddate(data).then((res) => {
							console.log(res)
							if (res.data.errmsg == '成功') {
								this.butt = false
								this.list()
								this.$message({
									type: 'success',
									message: this.title == '修改' ? '更新管理员成功' : '添加管理员成功'
								})
							} else {
								this.$message.error(res.data.errmsg)
							}
						})
					}
				})
			},
			dis(rew) {
				this.$confirm(`此操作将永久删除该管理员---${rew.id}---, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const eidd = rew.id
					deleted(eidd).then((resspose) => {
						console.log(resspose)
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
						this.list()
					}).catch((resspose) => {
						this.$message({
							type: 'warning',
							message: '删除失败!'
						})
						this.list()
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		// background-color: pink;
	}

	// 头部
	.Box {
		width: 100%;
		overflow: hidden;
		// height: 1000px;
	}

	// 表头
	.Header {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 90px !important;
	}

	// 中间
	.el-main {
		// background-color: #E9EEF3;
		color: #333;
		text-align: center;
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
	}

	// 底部
	.buttom {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 130px !important;
	}

	// 头部的input框
	.inpt {
		margin-top: 20px;
		float: left;
		z-index: 22;
		position: relative;
	}

	.inpt .el-input {
		width: 200px;
		// height: 600px;
		margin-left: 5px;
	}

	.el-icon-edit:hover {
		background-color: #41A6FE !important;
	}

	.el-icon-search {
		width: 100px;
		height: 33px;
		margin-left: 11px;
		// background-color: #0190FD;
	}

	.el-icon-search:hover {
		background-color: #41A6FE !important;
	}

	.block {
		margin-top: 10px;
	}
</style>
